<template>
  <div class="app-container pb-10">
    <el-card>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">头像:</div>
            <div class="text-14px ml-3">
              <div v-for="(item, index) in formData.avatars" :key="index">
                <el-image preview-teleported style="width: 100px; height: 100px" :src="item" :zoom-rate="1.2"
                  :max-scale="7" :min-scale="0.2" :preview-src-list="formData.avatars"
                  :initial-index="formData.avatars.length" fit="cover"></el-image>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">姓名:</div>
            <div class="text-14px ml-3">
              {{ formData.name }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">性别:</div>
            <div class="text-14px ml-3">
              {{ formData.sex == 0 ? '男' : '女' }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">我的身份:</div>
            <div class="text-14px ml-3">
              <span v-if="formData.identity == 0">职场人</span>
              <span v-else-if="formData.identity == 1">学生</span>
              <span v-else-if="formData.identity == 2">职场大牛</span>
              <span v-else-if="formData.identity == 3">管理层</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">参加工作时间:</div>
            <div class="text-14px ml-3">
              {{ formatTimestamp(formData.working_hours * 1000) }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">手机号码:</div>
            <div class="text-14px ml-3">
              {{ formData.tel }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">QQ号:</div>
            <div class="text-14px ml-3">
              {{ formData.qq }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">微信:</div>
            <div class="text-14px ml-3">
              {{ formData.wechat }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">邮箱号:</div>
            <div class="text-14px ml-3">
              {{ formData.emil }}
            </div>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">求职类型:</div>
            <div class="text-14px ml-3">
              {{ formData.job_seeking_type == 0 ? '全职' : '兼职' }}
            </div>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">求职状态:</div>
            <div class="text-14px ml-3">
              <span v-if="formData.job_seeking_status == 0">离职随时到岗</span>
              <span v-else-if="formData.job_seeking_status == 1">在职月内到岗</span>
              <span v-else-if="formData.job_seeking_status == 2">在职考虑机会</span>
              <span v-else-if="formData.job_seeking_status == 3">在职暂不考虑</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">我的优势:</div>
            <div class="text-14px ml-3">
              {{ formData.personal_advantage }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">求职城市:</div>
            <div class="text-14px ml-3">
              {{ formData.work_city }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">详细地址:</div>
            <div class="text-14px ml-3">
              {{ formData.address }}
            </div>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">兴趣城市:</div>
            <div class="text-14px ml-3">
              {{ formData.interested_cities_names }}
            </div>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">标签:</div>
            <div class="text-14px ml-3 flex">
              <div class="border  mr-2" v-for="item in formData.label">{{ item }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">最低薪资:</div>
            <div class="text-14px ml-3">
              {{ formData.money_min }}
            </div>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">最高新增:</div>
            <div class="text-14px ml-3">
              {{ formData.money_max }}
            </div>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">行业:</div>
            <div class="text-14px ml-3">
              {{ formData.industry_names }}
            </div>
          </div>
        </el-col>



        <el-col :span="24">
          <div class="font-bold !w-120px text-right mt-10">工作经历:</div>
          <el-row :gutter="10" v-for="item in formData.work_experience" :key="item.id" class="mt-4">
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">公司:</div>
                <div class="text-14px ml-3">
                  {{ item.name }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">是否实习:</div>
                <div class="text-14px ml-3">
                  {{ item.is_sx == 0 ? '是' : '否' }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">开始时间:</div>
                <div class="text-14px ml-3">
                  <template v-if="item.working_hours_min > 0">
                    {{ formatTimestamp(item.working_hours_min) }}
                  </template>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">结束时间:</div>
                <div class="text-14px ml-3">
                  <template v-if="item.working_hours_max > 0">
                    {{ formatTimestamp(item.working_hours_max) }}
                  </template>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">部门:</div>
                <div class="text-14px ml-3">
                  {{ item.department }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">岗位:</div>
                <div class="text-14px ml-3">
                  {{ item.job_title }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">职位:</div>
                <div class="text-14px ml-3">
                  {{ item.job_content }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">掌握技术:</div>
                <div class="text-14px ml-3">
                  {{ item.having_skills }}
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="24">
          <div class="font-bold !w-120px text-right mt-10">项目经历:</div>
          <el-row :gutter="10" v-for="item in formData.education" :key="item.id" class="mt-4">
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">学校名称:</div>
                <div class="text-14px ml-3">
                  {{ item.name }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">学历:</div>
                <div class="text-14px ml-3">
                  <span v-if="item.education == 1">中专/中技</span>
                  <span v-else-if="item.education == 2">高中</span>
                  <span v-else-if="item.education == 3">大专</span>
                  <span v-else-if="item.education == 4">本科</span>
                  <span v-else-if="item.education == 5">硕士</span>
                  <span v-else-if="item.education == 6">博士</span>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">是否全日制:</div>
                <div class="text-14px ml-3">
                  {{ item.is_qrz == 0 ? '是' : '否' }}
                </div>
              </div>

            </el-col>

            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">专业:</div>
                <div class="text-14px ml-3">
                  {{ item.major }}
                </div>
              </div>
            </el-col>

            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">入学时间:</div>
                <div class="text-14px ml-3">
                  <template v-if="item.start_time > 0">
                    {{ formatTimestamp(item.start_time) }}
                  </template>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">毕业时间:</div>
                <div class="text-14px ml-3">
                  <template v-if="item.end_time > 0">
                    {{ formatTimestamp(item.end_time) }}
                  </template>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">在校经历:</div>
                <div class="text-14px ml-3">
                  {{ item.content }}
                </div>
              </div>
            </el-col>

          </el-row>
        </el-col>

        <el-col :span="24">
          <div class="font-bold !w-120px text-right mt-10">相关证书:</div>
          <el-row :gutter="10" v-for="item in formData.certificate" :key="item.id" class="mt-4">
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">证书名称:</div>
                <div class="text-14px ml-3">
                  {{ item.name }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-120px text-right">证书图片:</div>
                <div class="text-14px ml-3 flex flex-wrap w-[400px]">
                  <div class="mr-2" v-for="(info, index) in item.images" :key="index">
                    <el-image preview-teleported style="width: 100px; height: 100px" :src="info" :zoom-rate="1.2"
                      :max-scale="7" :min-scale="0.2" :preview-src-list="item.images"
                      :initial-index="item.images.length" fit="cover"></el-image>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>

    <div class="fixed bottom-0 left-0 bg-[#fff] w-[100%] flex justify-center border-t-1 py-2 border-[#e4e7ed]">

      <template v-if="formData.audit == 0">
        <el-button v-hasPerm="['project/audit']" @click="handleAudit('return')">驳回</el-button>
        <el-button v-hasPerm="['project/audit']" type="primary" @click="handleAudit('commit')">通过</el-button>
      </template>

      <template v-if="formData.audit == 1">
        <el-button v-hasPerm="['project/audit']" @click="handleAudit('again')">再次驳回</el-button>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: "NetworkingInfo",
  inheritAttrs: false,
});

import { ref } from "vue";
import NwkAPI from "@/api/networking";
import { useRoute } from "vue-router";
const route = useRoute();
import { formatTimestamp } from '@/utils/index'

const formData = ref<any>({});
const getDataInfo = () => {
  NwkAPI.getFormData({ id: route.query.id }).then((data: any) => {
    data.avatars = data.avatar == "" ? [] : data.avatar.split(',');

    if (data.work_experience) {
      data.work_experience.forEach((item: any) => {
        item.working_hours_min = item.working_hours_min == 0 ? '' : item.working_hours_min * 1000;
        item.working_hours_max = item.working_hours_max == 0 ? '' : item.working_hours_max * 1000;
      })
    }
    if (data.project_experience) {
      data.project_experience.forEach((item: any) => {
        item.end_time = item.end_time == 0 ? '' : item.end_time * 1000;
        item.start_time = item.start_time == 0 ? '' : item.start_time * 1000;
      })
    }

    if (data.education) {
      data.education.forEach((item: any) => {
        item.end_time = item.end_time == 0 ? '' : item.end_time * 1000;
        item.start_time = item.start_time == 0 ? '' : item.start_time * 1000;
      })
    }

    if (data.certificate) {
      data.certificate.forEach((item: any) => {
        item.images = item.image == "" ? [] : item.image.split(',');
        console.log(item.images)
      })
    }

    Object.assign(formData.value, data);
  });
}

// 提交审核
const handleAudit = (type: string) => {
  ElMessageBox.prompt(
    "请输入用户「" + formData.value.name + "」的审核",
    `${type == 'commit' ? '通过' : type == 'return' ? '驳回' : '再次驳回'}`,
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      inputType: 'textarea',
    },
  ).then(
    ({ value }) => {
      NwkAPI.getAudit({ id: formData.value.id, type, err_note: value }).then(() => {
        ElMessage.success("操作成功");
        getDataInfo();
      });
    },
    () => {
      ElMessage.info("已取消");
    }
  );
}

onMounted(() => {
  getDataInfo();
});
</script>
